<template>
  <div style="min-width: 300px;width: 100%;">
    <el-form label-position="left" label-width="120px">
      <el-form-item :label="$t('Online')">
        <i v-if="device.online" class="el-icon-success success">{{
            $t("Yes")
          }}</i>
        <i v-else class="el-icon-error info">{{ $t("No") }}</i>
        <!-- <el-switch :value="device.online" :active-text="$t('Yes')" :inactive-text="$t('No')"></el-switch> -->
      </el-form-item>
      <el-form-item :label="$t('Mode')">
        <span v-if="device.mode === 4">{{ $t('CountDown') }}</span>
        <span v-if="device.mode === 5">{{ $t('Circulate') }}</span>
        <span v-if="device.mode === 6">{{ $t('Sustain') }}</span>
      </el-form-item>
      <el-form-item :label="$t('common.OnOff')">

        <span v-if="device.state === 1">
          <i class="el-icon-open success" /> {{ $t('On') }}
        </span>
        <span v-else>
          <i class="el-icon-turn-off info" /> {{ $t('Off') }}
        </span>

        <!-- <i :class="{'el-icon-switch-button':true,'success':device.state === 1,'info':device.state !== 1 }" />
        {{ device.state === 1?$t('On'):$t('Off') }} -->
        <!-- <el-switch :value="device.state === 1" :active-text="$t('On')" :inactive-text="$t('Off')"></el-switch> -->
      </el-form-item>
      <el-form-item v-if="device.mode === 4" :label="$t('Timing')+'/'+$t('Leave')">
        <span>{{ device.timingMinute }}min </span>/
        <span>{{ device.leaveMinute }}min </span>
      </el-form-item>
      <el-form-item v-if="device.mode === 4" :label="$t('common.electricCurrent')">
        <span>{{ device.current }}A </span>
      </el-form-item>
    </el-form>
    <div v-if="device.online">
      <el-button :type="buttonType" @click="deviceCommand('On',null,$t('On'))"
        :disabled="device.state === 1 || commanding" class="button-fixed">
        {{ $t('On') }}
      </el-button>
      <el-button :type="buttonType" @click="deviceCommand('Open',null,$t('Open'))" :disabled="commanding"
        class="button-fixed">
        {{ $t('Open') }}
      </el-button>
      <el-button :type="buttonType" @click="deviceCommand('Off',null,$t('Off'))"
        :disabled="device.state === 0 || commanding" class="button-fixed">
        {{ $t('Off') }}
      </el-button>
    </div>
  </div>
</template>
<script>
  import BaseController from "./BaseController";
  export default {
    name: "ChangingCarController",
    mixins: [BaseController],
    methods: {
      setItemDevice(data) {
        const {
          mode,
          online,
          state,
          leaveMinute,
          timingMinute,
          current
        } = data;
        Object.assign(this.device, {
          mode,
          online,
          state,
          leaveMinute,
          timingMinute,
          current,
        });
        this.$emit("input", this.device);
      }
    },
  };

</script>
